<template>
    <div>
        <div class="pageHeader">
            <el-button type="primary" @click="addProject">新增项目</el-button>
        </div>
        <div v-if="project && project.items.length > 0">
            <div class="project">
                <div class="projectList" v-for="item in project.items" :key="item.projectId">
                    <div class="projectTirle">
                        <div class="projectName">{{ item.projectName }}</div>
                        <div class="projectState" :class="item.projectState != 'FINISHEDTASK' ? 'projectState1' : ''">
                            <span v-if="item.projectState == 'UNFINISHEDTASK'">未完成</span>
                            <span v-if="item.projectState == 'FINISHEDTASK'">已完成</span>
                            <span v-if="item.projectState == 'OVERDUETASKS'">逾期</span>
                            <span v-if="item.projectState == 'TEMPORARYTASK'">临期</span>
                        </div>
                    </div>
                    <div class="projectContent">
                        <div class="projectContentItem">
                            <span>总任务数</span>
                            <span>{{ item.totalTasks }}</span>
                        </div>
                        <div class="projectContentItem">
                            <span>已完成任务</span>
                            <span>{{ item.finishTasks }}</span>
                        </div>
                        <div class="projectContentItem">
                            <span>逾期任务</span>
                            <span>{{ item.overdueTasks }}</span>
                        </div>
                        <div class="projectContentItem">
                            <span>未完成任务</span>
                            <span>{{ item.outstandingTasks }}</span>
                        </div>
                    </div>
                    <div class="lookDetails">
                        <el-button type="text" @click="apiwords(item)">接口文档</el-button>
                        <el-button type="text" @click="lookDetails(item)">项目详情</el-button>
                        <el-button type="text" @click="deleteObject(item)">删除项目</el-button>
                    </div>
                </div>
            </div>
            <pagination :totalNum="project.totalNum" @paginaClick="paginaClick"></pagination>
        </div>
        <el-empty v-else :image-size="200"></el-empty>
        <!-- mask -->
        <el-dialog title="新增项目" :visible.sync="dialogVisible" width="800px" :before-close="handleClose">
            <div>
                <el-form ref="form" :model="form" label-width="110px">
                    <el-form-item label="项目名称">
                        <el-input v-model="form.projectName" placeholder="请输入项目名称"></el-input>
                    </el-form-item>
                    <el-form-item label="项目负责人">
                        <el-select v-model="form.principalId" placeholder="请选择负责人" class="formSelectBox">
                            <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="createTask">立即创建</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import publicFunction from '../../utils/publicFunction'
export default {
    data() {
        return {
            project: '',
            pageNum: 1,
            dialogVisible: false,
            userList: [],
            form: {
                principalId: '',
                projectName: ''
            }
        }
    },
    mounted() {
        ;(this as any).getProject()
        ;(this as any).getUserList()
    },
    watch: {
        dialogVisible(data: boolean) {
            if (!data) {
                ;(this as any).form.principalId = ''
                ;(this as any).form.projectName = ''
            }
        }
    },
    methods: {
        addProject() {
            if ((this as any).$isAdmin()) {
                ;(this as any).dialogVisible = true
            } else {
                ;(this as any).$alert('你无权进行此操作！请联系管理员')
            }
        },
        lookDetails(item: any): void {
            ;(this as any).$router.push(`/project/projectdetails/${item.projectId}/${item.principalId}`)
        },
        apiwords(item: any) {
            ;(this as any).$router.push(`/apiword/apiwordlist/${item.projectId}/${item.projectName}`)
        },
        getProject(): void {
            let userId = ''
            let loginMsg = JSON.parse((sessionStorage as any).getItem('loginMsg'))
            if (loginMsg.permission != '1') {
                userId = loginMsg.id
            }
            ;(this as any).$request.get('/api/oa/users/findProject', { userId, pageNum: (this as any).pageNum, pageSize: (this as any).$setTing.paging.pageSize }).then((res: any): void => {
                if (res.code == 200) {
                    ;(this as any).project = res.data
                }
            })
        },
        // 获取用户列表
        getUserList(): void {
            ;(this as any).$request.get('/api/oa/users/list').then((res: any): void => {
                if (res.code == 200) {
                    ;(this as any).userList = res.data
                }
            })
        },
        deleteObject(item: any) {
            // console.log(item)
            if (!(this as any).$isAdmin()) {
                ;(this as any).$alert('你无权进行此操作！请联系管理员')
                return
            }
            ;(this as any)
                .$confirm('是否确认删除该项目?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    ;(this as any).$request.postForm('/api/oa/project/delete', { projectId: item.projectId }).then((res: any): void => {
                        if (res.code == 200) {
                            ;(this as any).$message.success('删除成功')
                            ;(this as any).pageNum = publicFunction.setDeletePageNum((this as any).project.totalNum, (this as any).$setTing.paging.pageSize)
                            ;(this as any).getProject()
                            // this.userValue = (this as any).userList[0].id
                        }
                    })
                    // this.$message({
                    //     type: 'success',
                    //     message: '删除成功!'
                    // })
                })
        },
        handleClose(): void {
            ;(this as any).dialogVisible = false
        },
        paginaClick(val: string | number): void {
            ;(this as any).pageNum = val
            ;(this as any).getProject()
        },
        createTask(): void {
            if ((this as any).form.projectName == '') {
                ;(this as any).$message.error('项目名称不能为空！')
                return
            }
            if ((this as any).form.principalId == '') {
                ;(this as any).$message.error('请选择项目负责人！')
                return
            }
            ;(this as any).$request.postJson('/api/oa/project/save', (this as any).form).then((res: any): void => {
                if (res.code == 200) {
                    ;(this as any).getProject()
                    ;(this as any).$message.success('新增成功')
                    ;(this as any).dialogVisible = false
                }
            })
        }
    }
}
</script>

<style scoped="scoped" lang="scss">
.pageHeader {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    .pageNameBox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        cursor: pointer;
        img {
            width: 14px;
            height: 14px;
            margin-right: 10px;
        }
        .pageName {
            color: #4064e1;
        }
    }
    .pageStatistics {
        font-size: 12px;
        color: #999999;
        margin-left: 20px;
    }
}
.project {
    .projectList {
        width: 24.2%;
        background: #ffffff;
        padding: 15px 20px;
        margin-left: 1%;
        margin-bottom: 1%;
        display: inline-block;
        &:nth-child(4n + 1) {
            margin-left: 0;
        }
        .projectTirle {
            width: 100%;
            border-bottom: 1px solid #e6e8ed;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 15px;
            color: #333;
            .projectName {
                font-weight: 600;
            }
            .projectState1 {
                color: #ff9600;
            }
        }
        .projectContent {
            .projectContentItem {
                display: flex;
                justify-content: space-between;
                align-items: center;
                line-height: 45px;
            }
            border-bottom: 1px solid #e6e8ed;
        }
        .lookDetails {
            text-align: right;
            margin-top: 18px;
            color: #4064e1;
            cursor: pointer;
        }
    }
}
.formSelectBox {
    width: 100%;
}
</style>
